<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#divv {
				width: 400px;
				height: 400px;
				border-radius: 50%;
				position: absolute;
				left: 200px;
				top: 200px;
			}
			
			.div1 {
				width: 400px;
				height: 200px;
				background-color: chartreuse;
				border-radius: 200px 200px 0 0;
				position: relative;
			}
			
			.div2 {
				width: 400px;
				height: 200px;
				background-color: black;
				border-radius: 0 0 200px 200px;
				position: relative;
			}
			
			.div3 {
				width: 200px;
				height: 200px;
				background-color: #000000;
				border-radius: 50%;
				position: absolute;
				top: 100px;
			}
			
			.div4 {
				width: 200px;
				height: 200px;
				background-color: chartreuse;
				border-radius: 50%;
				position: absolute;
				right: 0px;
				bottom: 100px;
			}
			
			.div3 div {
				width: 50px;
				height: 50px;
				background-color: chartreuse;
				border-radius: 25px;
				position: absolute;
				left: 75px;
				top: 75px;
				z-index: 10;
			}
			
			.div4 div {
				width: 50px;
				height: 50px;
				background-color: #000000;
				border-radius: 25px;
				position: absolute;
				left: 75px;
				top: 75px;
				z-index: 10;
			}
		</style>

	</head>

	<body>

		<div id="divv">

			<div class="div1">
				<div class="div3">
					<div>

					</div>
				</div>
			</div>
			<div class="div2">
				<div class="div4">
					<div>

					</div>
				</div>

			</div>
		</div>
		<button onclick="Divtop(-10)">向上移动</button>
		<button onclick="Divtop(10)">向下移动</button>
		<button onclick="Divleft(-10)">向左移动</button>
		<button onclick="Divleft(10)">向右移动</button>
		<button onclick="Divrt(-10,-10)">向左上移动</button>
		<button onclick="Divrt(10,-10)">向右上移动</button>
		<button onclick="Divrt(-10,10)">向左下移动</button>
		<button onclick="Divrt(10,10)">向右下移动</button>
		<script type="text/javascript">
			var i = 200;
			var t = 200;
			var tj = document.querySelector("#divv");

			function Divtop(x) {
				i = i + x;
				tj.style.top = i + "px";

			}

			function Divleft(x) {
				t = t + x;
				tj.style.left = t + "px";

			}

			function Divrt(x, y) {
				t = t + x;
				tj.style.left = t + "px";
				i = i + y;
				tj.style.top = i + "px";

			}
		</script>
	</body>

</html>